<template>
  <div class="app-container">
    <el-collapse v-model="currentBoard">
      <el-collapse-item name="1" class="collapse-item">
        <template #title>
          <div class="collapse-header">
            趋势看板
          </div>
        </template>
        <div class="chart-wrap">
          <div v-for="i in 5" :key="i" class="chart-item">
            <div class="chart-header">
              <p>新增订单 <span>(件)</span></p>
            </div>
            <div class="chart-tool">
              <el-radio-group v-model="block1.radio" class="count-type">
                <el-radio label="1">按天</el-radio>
                <el-radio label="2">按周</el-radio>
                <el-radio label="3">按月</el-radio>
              </el-radio-group>
              <el-date-picker
                  v-model="block1.date"
                  class="count-date"
                  type="daterange"
                  unlink-panels
                  :clearable="false"
                  range-separator="~"
                  start-placeholder="start"
                  end-placeholder="end"
              />
            </div>
            <div class="chart-view">
              <ChartView :config="block1.config" />
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2" class="collapse-item">
        <template #title>
          <div class="collapse-header">
            商品分布 <span class="sub-title">(统计截至昨日)</span>
          </div>
        </template>
        <div class="chart-wrap">
          <div v-for="i in 2" :key="i" class="chart-item">
            <div class="chart-header">
              <p>新增订单 <span>(件)</span></p>
            </div>
            <div class="chart-tool">
              <el-radio-group v-model="block2.radio" class="count-type">
                <el-radio label="1">按天</el-radio>
                <el-radio label="2">按周</el-radio>
                <el-radio label="3">按月</el-radio>
              </el-radio-group>
              <el-date-picker
                v-model="block2.date"
                class="count-date"
                type="daterange"
                unlink-panels
                :clearable="false"
                range-separator="~"
                start-placeholder="start"
                end-placeholder="end"
              />
            </div>
            <div class="chart-view">
              <ChartView :config="block2.config" />
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import ChartView from '@/components/ChartView'

const currentBoard = ref(['1', '2'])
const block1 = reactive({
  radio: '1',
  date: '',
  config: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  }
})
const block2 = reactive({
  radio: '1',
  date: '',
  config: {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '袜子' },
          { value: 735, name: '长袜' },
          { value: 580, name: '短袜' },
          { value: 484, name: '裤袜' },
          { value: 300, name: '其他' }
        ]
      }
    ]
  }
})
</script>

<style scoped lang="scss">
:deep(.el-collapse) {
  border-bottom: 0;
  .el-collapse-item__header {
    height: 48px;
    background-color: #e8f1fe;
  }
  .el-collapse-item__wrap {
    border-bottom: 0;
  }
  .el-collapse-item__content {
    padding: 12px;
    border: solid 1px #f0f2f6;
    border-top: transparent;
  }
}

.app-container {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  .collapse-item {
    margin-bottom: 20px;
    .collapse-header {
      padding-left: 15px;
      font-size: 16px;
      .sub-title {
        font-size: 12px;
        color: #282b2e;
      }
    }
  }

  .chart-wrap {
    display: flex;
    flex-wrap: wrap;
    .chart-item {
      width: 450px;
      margin-right: 30px;
      margin-bottom: 20px;
      padding: 12px;
      box-shadow: 0 2px 8px 0 rgba(222,233,244,.6);
      .chart-header,
      .chart-tool {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .chart-header {
        > p {
          color: #282b2e;
          font-size: 16px;
          > span {
            font-size: 12px;
            color: #86898d;
          }
        }
      }
      .chart-tool {
        .count-type {
          .el-radio:not(:last-child) {
            margin-right: 15px;
          }
        }
        :deep(.count-date) {
          flex: 1;
          margin-left: 60px;
          .el-range__close-icon {
            display: none;
          }
        }
      }
    }
  }
}
</style>